PTB-fe/pages/signature/pleno-sanksi/[id].js

import React, { Component } from 'react';
import BasePage from "@/components/Layout/BasePage";

import { getOneLaporanPublic } from '../../../actions/public';
import { getAutoSave } from "@/actions/autosave";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input } from "reactstrap";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import SignatureCanvas from 'react-signature-canvas'
import { addPesertaPleno } from '../../../actions/public';
import { toast } from "react-toastify";
import Router from "next/router";
import swal from "sweetalert2";



class PlenoSanksi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataLaporan: {},
            modal: false,
            signature: "",
            nama: "",
            data: {},
            changesign: false

        }
    }
    static getInitialProps = async ({ query }) => {
        return { query };

    };

    componentDidMount = async () => {
        const { query } = this.props;
        const { id } = query;
        const dataLaporan = await getOneLaporanPublic(id);
        const getDataSave = await getAutoSave({ id, laporan: true });
        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran.data;
        this.setState({ dataLaporan, dataSuratBA, dataPelanggaran });
    };

    toggleModal = (value = true) => {
        if (!value) {
            this.setState({ modal: false });
        } else {
            this.setState({ modal: !this.state.modal });
        }
    };
    sigPad = []
    clear = () => {
        this.sigPad.clear()
    }
    updateValueSignature = () => {
        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
        this.setState({
            signature: addsig,
            changesign: true

        })
    }

    updateValueNama = (e) => {
        this.setState({ nama: e.target.value });
    }


    onSubmit = async (e) => {

        const { query, token } = this.props;
        const { id } = query;
        const sign = this.state.signature
        const blob = await (await fetch(sign)).blob();
        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
        const formdata = new FormData();
        formdata.append("ttd", files);
        formdata.append("laporan_id", id);
        formdata.append("nama", this.state.nama);
        const added = await addPesertaPleno(token, formdata);
        const toastid = toast.loading("Please wait...");
        if (!added) {
            swal.fire({
                title: "Gagal Input Tanda Tangan",
                icon: "error",
                confirmButtonColor: "#3e3a8e",
            });

        } else {
            swal.fire({
                title: "Berhasil Input Tanda Tangan",
                icon: "success",
                confirmButtonColor: "#3e3a8e",

            });
            Router.push("/app");

        }
    };




    render() {
        const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama, changesign } = this.state
        return (
            <ContentWrapper unwrap>
                <Modal isOpen={this.state.modal} >

                    <ModalBody>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Nama:</label>
                            <div className="col-md-10">
                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
                            </div>
                        </FormGroup>
                        <FormGroup row>
                            <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />

                            <ModalFooter>
                                <Button color className="btn-login" onClick={this.updateValueSignature
                                }>
                                    <span className="font-color-white">Save</span>
                                </Button>
                                <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
                                    Hapus
                                </Button>
                            </ModalFooter>
                        </FormGroup>
                        <ModalFooter>
                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className="btn-login" onClick={this.onSubmit}>
                                <span className="font-color-white">Kirim</span>
                            </Button>
                        </ModalFooter>

                    </ModalBody>
                </Modal>
                <div className='page'>
                    <div className='BA-logo'>
                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                    </div>
                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
                    <div className='body'>
                        <p className='body'>
                            Pada hari ini
                            {dataSuratBA?.setTanggal === true ?
                                <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
                                <span> &nbsp;......... &nbsp;</span>
                            }
                            &nbsp;bertempat di
                            {dataSuratBA?.tempat === "[Mohon Diisi]" ?
                                <span>Belum Diisi Oleh Dikti</span>
                                :
                                <span>
                                    &nbsp;{dataSuratBA?.tempat}
                                </span>
                            }
                            ,
                            telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:

                        </p>
                        <div className=''>
                            <ol>
                                {dataLaporan.data?.peserta_penetapan_sanksi ?
                                    <span>
                                        {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
                                    </span>
                                    :
                                    <span>Belum Ada Data</span>
                                }

                            </ol>
                        </div>
                    </div>
                    <p>
                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
                    </p>
                    <div className='body'>
                        <ol>
                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
                                {dataSuratBA?.setTanggal === true ?
                                    <span> &nbsp;{moment(dataSuratBA.tanggal).format("DD-MM-YYYY")}</span>
                                    :
                                    <span> &nbsp;....... &nbsp;</span>
                                }</li>
                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
                            <table className='table-a'>
                                <thead>
                                    <tr>
                                        <th rowspan="2">NO</th>
                                        <th rowspan="2">NAMA DAN IZIN PRODI</th>
                                        <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
                                        <th rowspan="2">SIMPULAN</th>
                                        <th rowspan="2">REKOMENDASI</th>
                                    </tr>
                                    <tr>
                                        <th>PASAL</th>
                                        <th>BUTIR PELANGGARAN</th>
                                        <th>DESKRIPSI PELANGGARAN</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {dataPelanggaran
                                        ? dataPelanggaran.map((e, i) => (
                                            <tr key={e._id}>
                                                <td>{++i}</td>
                                                {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
                                                <td>{e.pasal}</td>
                                                <td>{e.butir_pelanggaran}</td>
                                                <td>{e.pelanggaran}</td>
                                                <td >[Mohon Diisi]</td>
                                                <td >[Mohon Diisi]</td>
                                            </tr>

                                        ))
                                        : ""}
                                </tbody>
                            </table>
                            <li>Temuan Lain:
                                <ol type="a">
                                    {dataSuratBA?.temuanLain ?
                                        <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
                                        : "Belum Diisi"}
                                </ol>
                            </li>
                            <li>Hal-hal yang memberatkan, sebagai berikut:
                                <ol type="a">
                                    {dataSuratBA?.memberatkan ?
                                        <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
                                        : "Belum Diisi"}
                                </ol>
                            </li>
                            <li>hal-hal yang meringankan, sebagai berikut:
                                <ol type="a">
                                    {dataSuratBA?.meringankan ?
                                        <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
                                        : "Belum Diisi"}
                                </ol>
                            </li>
                            <li>
                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
                                    {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
                                        "Belum Diisi Oleh Dikti"
                                        : <span>{dataSuratBA?.sanksi}</span>}
                                    ”.</strong>
                            </li>
                        </ol>
                    </div>
                    <p className='body'>
                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                    </p>
                    <p><strong>Note: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
                    <Button color="" className="btn-labeled-notHover" onClick={this.toggleModal}>
                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
                    </Button>
                </div>
            </ContentWrapper>
        );
    }

}

PlenoSanksi.Layout = BasePage;
export default PlenoSanksi;